<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车案例</title>
  <script src="js/vue.js"></script>
  <style>
    table{
      border: 1px solid #e9e9e9;
      border-collapse: collapse;
      border-spacing: 0;
      empty-cells: show;
      margin-bottom: 20px
    }
    th,td{
      padding: 8px 16px;
      border: 1px solid #e9e9e9;
      text-align: center
    }
    th {
      background-color: #f7f7f7;
      color: #5c6b77;
      font-weight: 600;
      white-space: nowrap
    }
    
  </style>
</head>
<body>
  <div id="app">
    <template v-if="list.length">
      <table>
        <!-- 表格头部 -->
        <thead>
          <tr>
            <th><input  :checked="isAll" type="checkbox"  @click="allChecked"></th>
            <th>商品名称</th>
            <th>商品单价</th>
            <th>商品数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <!-- 表格内容区 -->
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td><input @click="handleRadio(index)" type="checkbox" :checked="item.checked"></td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td><button :disabled="item.count === 1 "  @click="handleClickReduce(index)">-</button>{{item.count}} <button @click="handleClickAdd(index)">+</button></td>
            <td><button @click="handleClickRemove(index)">删除</button></td>
          </tr>
        </tbody>

      </table>
      <div>总价: ¥{{totalPrice}}</div>
    </template>
    <div v-else>购物车空空如也</div>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data(){
        return {
          list: [
            {
              id: 1,
              name: 'iphone 7',
              price: 1688,
              count: 1,
              checked: false
            },
            {
              id: 2,
              name: 'iPad Pro',
              price: 5888,
              count: 1,
              checked: false
            },
            {
              id: 3,
              name: 'MacBook Pro',
              price: 21488,
              count: 1,
              checked: false
            },
          ],
          isAll: false
        }
      },
      methods: {
        handleClickReduce(index) {
          let item = this.list[index];
          if(item.count == 1) {
            return
          }
          item.count--;
        },
        handleClickAdd(index) {
          this.list[index].count++;
        },
        handleClickRemove(index) {
          this.list.splice(index, 1);
        },
        allChecked() {
          this.isAll = !this.isAll; 
          this.list.forEach(item => {
            item.checked = this.isAll
          })
        },
        handleRadio (index) {
          this.list[index].checked = !this.list[index].checked;
          this.isAll = this.list.every(item => {
            return item.checked == true;
          })
        }
      },
      computed: {
        totalPrice() {
          var total = 0;
          for (var i = 0; i < this.list.length; i++) {
            if(this.list[i].checked) {
              var item = this.list[i];
              total += item.price * item.count;
            }
            
          };
          return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
        }
      }
    });
  </script>
</body>
</html>